<template>
  <div class="base-upload">
    <input
      ref="elFile"
      style="display: none"
      type="file"
      :accept="props.accept"
      @change="onPickFile"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import wfc from '@/wfc/client/wfc'
import MessageContentMediaType from '@/wfc/messages/messageContentMediaType'

const props = defineProps({
  accept: {
    type: String,
    default: 'image/png, image/jpeg',
  },
})

const emit = defineEmits(['success'])

const elFile = ref(null)

function onPickFile(e) {
  let file = e.target.files[0]

  wfc.uploadMedia(
    file.name,
    file,
    MessageContentMediaType.Portrait,
    (url) => {
      emit('success', { url })
    },
    (err) => {
      console.error(err)
      $message.error('上传失败')
    }
  )
}

defineExpose({
  elFile,
})
</script>

<style lang="scss" scoped></style>
